<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QuokkaWeather</title>
    <div id="links">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
              integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
              crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
                crossorigin="anonymous"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
        <!-- Yandex.RTB -->
        <script>window.yaContextCb = window.yaContextCb || []</script>
        <script src="https://yandex.ru/ads/system/context.js" async></script>
        <!-- Yandex.Metrika counter -->
        <script type="text/javascript">
            (function (m, e, t, r, i, k, a) {
                m[i] = m[i] || function () {
                    (m[i].a = m[i].a || []).push(arguments)
                };
                m[i].l = 1 * new Date();
                for (var j = 0; j < document.scripts.length; j++) {
                    if (document.scripts[j].src === r) {
                        return;
                    }
                }
                k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
            })
            (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

            ym(95988155, "init", {
                clickmap: true,
                trackLinks: true,
                accurateTrackBounce: true,
                webvisor: true
            });
        </script>
        <noscript>
            <div><img src="https://mc.yandex.ru/watch/95988155" style="position:absolute; left:-9999px;" alt=""/></div>
        </noscript>
        <!-- /Yandex.Metrika counter -->
    </div>
    <link href="/static/style.css" rel="stylesheet" type="text/css"/>
    <script src="/static/script.js" type="text/javascript"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12">

            <h1 style="visibility: hidden">QuokkaWeather</h1>

            <nav class="navbar bg-body-tertiary fixed-top">
                <div class="container-fluid">
                    <a class="navbar-brand" href="/">Квокка Погода</a>
                </div>
            </nav>

            <div id="spinner" style="display: block" class="text-center mt-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <h5>Идёт загрузка данных...</h5>
            </div>

            <div id="card" style="display: none" class="card mt-4">
                <div class="card-body">
                    <h1 id="temp" class="card-title">Погода сейчас °C</h1>
                    <p id="info" class="card-text">Сейчас в городе</p>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <h5>Основная информация</h5>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-alarm"></i></li>
                                        <li id="time" class="list-inline-item">Время</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-thermometer-half"></i></li>
                                        <li id="feels" class="list-inline-item">Ощущается как</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-droplet"></i></li>
                                        <li id="humi" class="list-inline-item">Влажность</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-brightness-high"></i></li>
                                        <li id="uv" class="list-inline-item">У/Ф излучение</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-search"></i></li>
                                        <li id="visi" class="list-inline-item">Видимость</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="col-md-4">
                            <h5>Качество воздуха</h5>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-cloud"></i></li>
                                        <li id="co" class="list-inline-item">CO</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-droplet-half"></i></li>
                                        <li id="no2" class="list-inline-item">NO₂</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-truck"></i></li>
                                        <li id="o3" class="list-inline-item">O₃</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-person"></i></li>
                                        <li id="pm25" class="list-inline-item">PM 2.5</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-hourglass"></i></li>
                                        <li id="pm10" class="list-inline-item">PM 10</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="col-md-4">
                            <h5>Другая информация</h5>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-stars"></i></li>
                                        <li id="sunrise" class="list-inline-item">Восход</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-sunset"></i></li>
                                        <li id="sunset" class="list-inline-item">Закат</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-flag"></i></li>
                                        <li id="country" class="list-inline-item">Страна</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-arrow-up-left"></i></li>
                                        <li id="lat" class="list-inline-item">Широта</li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="bi bi-chevron-double-left"></i></li>
                                        <li id="lot" class="list-inline-item">Долгота</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div id="weatherFind" style="display: none;" class="card mt-3 mb-3">
                <div class="card-body">
                    <h5>Поиск города</h5>
                    <div class="row g-3">
                        <div class="col-md-11">
                            <input id="cityName" class="form-control" placeholder="Название города">
                        </div>
                        <div class="col-md-1">
                            <button onclick="findCityWeather()" class="btn btn-primary">
                                Поиск
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Yandex.RTB R-A-4698651-1 -->
            <div id="yandex_rtb_R-A-4698651-1"></div>
            <script>
                window.yaContextCb.push(() => {
                    Ya.Context.AdvManager.render({
                        "blockId": "R-A-4698651-1",
                        "renderTo": "yandex_rtb_R-A-4698651-1"
                    })
                })
            </script>

        </div>
    </div>
</div>


</body>
</html>